import QtQuick
import QtQuick.Window

Item {
    id: root
    width: 480
    height: 300
    property int duration: 3000

    // 构建足球场, 上面天空, 下面草坪
    Rectangle {
        id: sky
        width: parent.width
        height: 200

        gradient: Gradient { // 天空颜色
            GradientStop { position: 0.0; color: "#0080FF" }
            GradientStop { position: 1.0; color: "#66CCFF"}
        }
    }

    Rectangle {
        id: ground
        width: parent.width
        anchors.top: sky.bottom
        anchors.bottom: root.bottom

        gradient: Gradient {
            GradientStop { position: 0.0; color: "#00FF00" }
            GradientStop { position: 1.0; color: "#00803F" }
        }
    }

    Image {
        id: ball
        source: "images/soccer_ball.png"
        scale: 0.3
        x: 0; y: root.height - height

        MouseArea {
            anchors.fill: parent
            onClicked: {
                ball.x = 0
                ball.y = root.height - ball.height
                ball.rotation = 0
                anim.restart()
            }
        }
    }

    ParallelAnimation {
        id: anim
        SequentialAnimation {
            NumberAnimation {
                target: ball
                properties: "y"
                to: 20
                duration: root.duration * 0.4
                easing.type: Easing.OutCirc // 快速踢出效果
            }

            NumberAnimation {
                target: ball
                properties: "y"
                to: root.height - ball.height
                duration: root.duration * 0.6
                easing.type: Easing.OutBounce // 地面反弹效果
            }
        }

        NumberAnimation {
            target: ball
            properties: "x"
            to: 380
            duration: root.duration
        }

        RotationAnimation {
            target: ball
            properties: "rotation"
            to: 720
            duration: root.duration
        }
    }
}
